<template>
	<view class="checkdetail">
		<view class="checkdetail-head">
			<view class="head-left">
				<view class="title">{{ detaildata.name }}</view>
				<view class="tabs">
					<view class="tab">{{ detaildata.industryName }}</view>
					<view class="tab">{{ detaildata.institutionType }}</view>
				</view>
				<view class="address">
					<uni-icons type="location" size="24" color="#3b9ae9"></uni-icons>{{ detaildata.registerAddress }}
				</view>
			</view>
			<view class="head-right">
				<view class="detail-img" v-if="pageType == 'check'">
					<image src="../../static/images/inprogress.png" mode="" style="width: 120rpx; height: 100rpx"
						v-if="detaildata.checkStatus == 1">
					</image>
					<image src="../../static/images/finishprogress.png" mode="" style="width: 120rpx; height: 100rpx"
						v-if="detaildata.checkStatus == 2">
					</image>
					<image src="../../static/images/noprogress.png" mode="" style="width: 120rpx; height: 100rpx"
						v-if="detaildata.checkStatus == 0">
					</image>
				</view>
				<view class="detail-img" v-if="pageType == 'task'">
					<image src="../../static/images/Checked.png" mode="" style="width: 120rpx; height: 100rpx"
						v-if="detaildata.taskStatus == 1">
					</image>
					<image src="../../static/images/incheck.png" mode="" style="width: 120rpx; height: 100rpx"
						v-if="detaildata.taskStatus == 0">
					</image>
				</view>
			</view>
		</view>
		<!-- 工单 -->
		<view class="checkdetail-item" v-if="detaildata.taskSource != 3">
			<view class="item-title">
				<image src="../../static/images/texticon.png" mode="" style="width: 50rpx; height: 50rpx">
				</image>
				<text>工单详情</text>
			</view>
			<view class="work-content">
				<view class="content-item">
					<view class="title"> 任务来源: </view>
					<view class="text">
						{{ detaildata.taskSourceName }}
					</view>
				</view>
				<view class="content-item">
					<view class="title"> 下发时间: </view>
					<view class="text">
						{{ detaildata.createTime }}
					</view>
				</view>
				<view class="content-item">
					<view class="title"> 截止时间: </view>
					<view class="text">
						{{ detaildata.lastDate }}
					</view>
				</view>
				<view class="content-item">
					<view class="title"> 详细说明: </view>
					<view class="text">
						{{ detaildata.remark }}
					</view>
				</view>
			</view>
		</view>
		<view class="checkdetail-item">
			<view class="item-title">
				<image src="../../static/images/reportCheck.png" mode="" style="width: 50rpx; height: 50rpx">
				</image>
				<text>检查详情</text>
			</view>
			<!-- 检查 -->
			<view class="checkdtl">
				<view class="checkdtl-title"> 检查明细 </view>
				<view class="checkdtl-content">
					<view class="content-item">
						<view class="title"> 检查人: </view>
						<view class="text">
							{{ detaildata.checkName || "--" }}
						</view>
					</view>
					<view class="content-item">
						<view class="title"> 检查单位: </view>
						<view class="text">
							{{ detaildata.checkUnitName || "--" }}
						</view>
					</view>
					<view class="content-item">
						<view class="title"> 检查时间: </view>
						<view class="text">
							{{ detaildata.checkDate || "--" }}
						</view>
					</view>
				</view>

				<view class="checkdtl-tabs">
					<view class="tab">
						检查事项
						<text style="color: #8ebaff">{{
              detaildata.allStandard || 0
            }}</text>
						项
					</view>
					<view class="tab">
						达标
						<text style="color: #6bffc9">{{ detaildata.standard || 0 }}</text>
						项
					</view>
					<view class="tab">
						不达标
						<text style="color: #ffbd7c">{{
              detaildata.notStandard || 0
            }}</text>
						项
					</view>
				</view>
				<view class="checkdtl-table">
					<view class="table-th">
						<view class="th-check"> 检查结果 </view>
						<view class="th-content"> 检查项 </view>
					</view>
					<view class="table-tb" v-for="(item, index) in questionAnswerList" :key="index">
						<view class="tb-content">
							<view class="tb-check">
								<image src="../../static/images/qualify.png" mode="" style="width: 45rpx; height: 45rpx"
									v-if="item.standardOrNot == 0">
								</image>
								<image src="../../static/images/unqualify.png" mode=""
									style="width: 45rpx; height: 45rpx" v-if="item.standardOrNot == 1"
									@touchend="handlerquestion(item, index, $event)"></image>
							</view>
							<view class="tb-contentext">
								{{ item.questionLabel }}
								<view v-if="showPopup" class="popup" :class="{ hiddle: activepopup !== index }"
									:style="{ left: popupX + 'rpx', top: popupY + 'rpx' }">
									<view class="triangle"></view>
									<view class="close" @click="closepopup">x</view>
									<view class="problems">
										<view class="title">存在的问题及其情况</view>
										<view class="text">
											{{ qusitiontext }}
										</view>
									</view>
									<view class="Subitem">
										<view class="title">检查子项</view>
										<up-checkbox-group v-model="lackItemList" placement="column" size="12" disabled
											v-if="questionDetailList.length > 0">
											<up-checkbox :customStyle="{ marginBottom: '8px' }"
												v-for="(jtem, i) in questionDetailList" :key="i"
												:label="jtem.questionDetailLabel" :name="String(jtem.questionDetailId)">
											</up-checkbox>
										</up-checkbox-group>
										<view class="Subitem-empty" v-else>没有检查子项</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="checkdtl-title"> 检查纪实 </view>
				<view class="checkdtl-textarea">
					{{ evidencetext }}
				</view>
				<view class="checkdtl-title"> 现场照片 </view>

				<view class="checkdtl-pics" v-if="picList.length > 0">
					<view class="pic" v-for="(item, index) in picList" :key="index">
						<image :src="item.url" mode="" style="width: 200rpx; height: 130rpx"
							@click="previewImg(item.url)">
						</image>
					</view>
				</view>
				<view class="empty-pic" v-if="picList.length == 0">
					<image src="../../static/images/emptypic.png" mode="" style="width: 200rpx; height: 130rpx">
					</image>
				</view>
			</view>
		</view>
		<view class="checkdetail-item" v-if="
        detaildata.disposalFollowLogsVOS &&
        detaildata.disposalFollowLogsVOS.length > 0
      ">
			<view class="item-title">
				<image src="../../static/images/management.png" mode="" style="width: 50rpx; height: 50rpx">
				</image>
				<text>处置日志</text>
			</view>
			<view class="management-step">
				<view class="step" v-for="(ctem, index) in detaildata.disposalFollowLogsVOS" :key="index">
					<view class="step-line"></view>
					<view class="step-content">
						<view class="step-item">
							<view class="dot" :style="{
            'backgroundColor':
              ctem.nodeColour == 0
                ? '#44cd7b'
                : ctem.nodeColour == 1
                ? '#ff4d3b'
                : ctem.nodeColour == 3
                ? 'gray'
                : '#546dff'
          }"></view>
							<view class="content">
								<view class="content-opeate">{{ ctem.title }}</view>
								<view class="content-time">{{ ctem.updateTime }}</view>
							</view>
						</view>
						<view class="step-source">
							<view class="dot"></view>
							<text style="margin-right: 10rpx">{{ ctem.nickName }} </text>
							<text> {{ ctem.operationTypeName }}</text>
						</view>
						<view class="step-text">
							<view class="dot"></view>
							<view class="content-change" @click="handlereditchange(ctem)"
								v-if="ctem.operationType == 6">
								检查记录 <text style="color: #2c71fc">{{ ctem.content }}
								</text>&nbsp;处变更 &nbsp; &nbsp;
							</view>
							<view class="" v-else>
								<text>处理意见:</text> {{ ctem.content || "--" }}
							</view>
						</view>
						<view class="step-pics" v-if="ctem.fileList">
							<view class="dot"></view>
							<view class="pic" v-for="(gtem, index) in ctem.fileList" :key="index">
								<image :src="gtem.url" mode="" style="width: 180rpx; height: 110rpx"
									@click="previewImg(gtem.url)">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="stay-empty" v-if="pageType == 'task' || pageType == 'danger'"></view>
	</view>
	<view class="btn" v-if="pageType == 'task'">
		<view class="check-btn" @click="tocheck(detaildata.institutionId)">
			检查上报
		</view>
	</view>
	<view class="btn" v-if="pageType == 'danger' ||pageType == 'message'">
		<!-- deptType用于区分指挥中心还是派出所、行业账号-->
		<view class="danger-btn">
			<up-button type="success" class="btn-item" @click="handlerTaskDisposal(1)" v-if="
          [2].includes(userStore.userinfo.deptType) &&
          rowdata.followStatus == 0 &&
          rowdata.buttonAuthorityList.includes('3')
        ">办理
			</up-button>
			<up-button type="primary" class="btn-item" @click="handlerTaskDisposal(0)" v-if="
          [0].includes(userStore.userinfo.deptType) &&
          rowdata.followStatus == 0 &&
          rowdata.buttonAuthorityList.includes('1')
        ">转派
			</up-button>
			<up-button type="warning" class="btn-item" @click="handlerTaskDisposal(4)" v-if="
          [1].includes(userStore.userinfo.deptType) &&
          rowdata.followStatus == 0 &&
          rowdata.buttonAuthorityList.includes('4')
        ">复核
			</up-button>
			<up-button color="#626aef" class="btn-item" @click="handlerTaskDisposal(3)" v-if="
          userStore.cityId &&
          [0].includes(userStore.userinfo.deptType) &&
          rowdata.followStatus == 0 &&
          rowdata.buttonAuthorityList.includes('0')
        ">上报
			</up-button>
			<up-button type="error" class="btn-item" @click="handlerTaskDisposal(2)" v-if="
          [2].includes(userStore.userinfo.deptType) &&
          rowdata.followStatus == 0 &&
          rowdata.buttonAuthorityList.includes('2')
        ">退回
			</up-button>
		</view>
	</view>
	<!-- 操作弹窗 -->
	<uni-popup ref="popup" background-color="#fff" border-radius="30rpx 30rpx 0 0" @maskClick="maskclose">
		<view class="popup-content">
			<view class="popup-content-title">
				<text>{{ dialogtitle }}</text>
				<view class="popup-content-close">
					<uni-icons type="closeempty" size="20" color="#a6a6a6" @click="maskclose"></uni-icons>
				</view>
			</view>
			<view class="popup-form">
				<up-form labelPosition="top" :model="operateform" :rules="rules" ref="uFormRef">
					<!-- 办理 -->
					<view v-if="operateform.operationType == 1">
						<up-form-item label="处理意见:" prop="content" labelWidth="150" :required="true">
							<up-textarea v-model="operateform.content" placeholder="请输入内容"></up-textarea>
						</up-form-item>
						<up-form-item label="现场照片:" prop="picList" labelWidth="150" :required="true">
							<up-input v-show="false" v-model="operateform.picList"></up-input>
							<view class="checkpload">
								<view class="checkpload-tooltip">
									<image src="../../static/images/dialogicon.png" mode=""
										style="width: 40rpx; height: 40rpx">
									</image>
									<text style="margin-left: 10rpx; color: #6f6f6f">支持JPEG/JPG/PNG格式图片，不超过5张</text>
								</view>
								<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="5" width="190rpx" height="160rpx"
									:previewFullImage="true"></up-upload>
							</view>
						</up-form-item>
					</view>
					<!-- 转派 -->
					<view v-if="operateform.operationType == 0">
						<up-form-item label="主管单位:" prop="deptIds" labelWidth="150" :required="true">
							<uni-data-select v-model="operateform.deptIds" :localdata="chargeList"
								@change="deptIdsHandle" placeholder="请选择主管单位"></uni-data-select>
						</up-form-item>
						<up-form-item label="处理意见:" prop="content" labelWidth="150" :required="true">
							<up-textarea v-model="operateform.content" placeholder="请输入内容"></up-textarea>
						</up-form-item>
					</view>
					<!-- 上报和退回 -->
					<view v-if="
              operateform.operationType == 2 || operateform.operationType == 3
            ">
						<up-form-item label="处理意见:" prop="content" labelWidth="150" :required="true">
							<up-textarea v-model="operateform.content" placeholder="请输入内容"></up-textarea>
						</up-form-item>
					</view>
					<!-- 复核 -->
					<view v-if="operateform.operationType == 4">
						<up-form-item label="处理结果:" prop="businessResult" labelWidth="150" :required="true">
							<up-radio-group v-model="operateform.businessResult" placement="row">
								<up-radio label="通过" :name="1" style="margin-right: 40rpx"></up-radio>
								<up-radio label="驳回" :name="2"></up-radio>
							</up-radio-group>
						</up-form-item>
						<up-form-item label="处理意见:" prop="content" labelWidth="150" :required="true">
							<up-textarea v-model="operateform.content" placeholder="请输入内容"></up-textarea>
						</up-form-item>
						<up-form-item label="现场照片:" prop="picList" labelWidth="150" :required="true">
							<up-input v-show="false" v-model="operateform.picList"></up-input>
							<view class="checkpload">
								<view class="checkpload-tooltip">
									<image src="../../static/images/dialogicon.png" mode=""
										style="width: 40rpx; height: 40rpx">
									</image>
									<text style="margin-left: 10rpx">支持JPEG/JPG/PNG格式图片，不超过5张</text>
								</view>
								<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
									multiple :maxCount="5" width="190rpx" height="160rpx"
									:previewFullImage="true"></up-upload>
							</view>
						</up-form-item>
					</view>
				</up-form>
			</view>
			<view class="popup-content-button">
				<u-button @click="determine" color="linear-gradient(-90deg, #00C2D3, #00A7FF)"
					style="margin-right: 20rpx">确定</u-button>
				<u-button color="#adadad" @click="maskclose">取消</u-button>
			</view>
		</view>
	</uni-popup>

	<!-- 操作弹窗 -->
	<uni-popup ref="contrastpopup" background-color="#fff" border-radius="30rpx 30rpx 0 0" @maskClick="contrastclose">
		<view class="popup-content">
			<view class="popup-content-title">
				<text>更新信息比对</text>
				<view class="popup-content-close">
					<uni-icons type="closeempty" size="20" color="#a6a6a6" @click="contrastclose"></uni-icons>
				</view>
			</view>
			<view class="contrastpopup-table">
				<view class="checkdtl-table">
					<view class="table-th">
						<view class="th-check"> 变更字段 </view>
						<view class="th-content"> 变更后 </view>
						<view class="th-content"> 变更前 </view>
					</view>
					<view class="table-tb" v-for="(item, index) in changeList" :key="index">
						<view class="tb-content">
							<view class="tb-check">
								{{item.title || '--'}}
							</view>
							<view class="tb-content">
								{{item.afterParam || '--'}}
							</view>
							<view class="tb-content">
								{{item.beforeParam || '--'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>


	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		nextTick
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getselectDangerDetailByTaskId,
		gettaskdetail,
		getquestion,
		getInfoByFollow
	} from "@/api/checklist.js";
	import {
		updateTaskDisposal,
		selectDeptListByUser
	} from "@/api/danger.js";
	import {
		uploadFiles
	} from "@/utils";
	import useUserStore from "@/stores/user.js";
	import {
		logout
	} from "../../api/login";
	const userStore = useUserStore();
	let picList = ref([]);

	let showPopup = ref(false);
	let popupX = ref(0);
	let popupY = ref(0);
	let lackItemList = ref([]);
	let questionDetailList = ref([]);
	//主管单位下拉
	const chargeList = ref([]);

	const rules = {
		content: {
			type: "string",
			required: true,
			message: "请填写处理意见",
			trigger: ["blur", "change"],
		},
		deptIds: {
			type: "number",
			required: true,
			message: "请选择主管单位",
			trigger: ["blur", "change"],
		},
		businessResult: {
			type: "number",
			required: true,
			message: "请选择处理结果",
			trigger: ["blur", "change"],
		},
		picList: [{
			// 自定义验证函数，见上说明
			validator: (rule, value, callback) => {
				console.log(
					"operateform.value.picList自定义验证函数",
					operateform.value.picList
				);
				if (!operateform.value.picList || operateform.value.picList == 0) {
					callback(new Error("请上传图片"));
				} else {
					callback();
				}
			},
			// 触发器可以同时用blur和change
			trigger: ["change", "blur"],
		}, ],
	};

	// 预览图片
	const previewImg = (e) => {
		uni.previewImage({
			urls: [e],
		});
	};

	/**
	 * @description: 处理详情信息
	 * @param {Number} id
	 */
	let detaildata = ref({});
	let questionAnswerList = ref([]);
	let evidencetext = ref("");
	let qusitiontext = ref("");
	let pageType = ref("");
	let rowdata = ref({});
	const handleDetailInfo = (row, type) => {
		pageType.value = row.pageType;
		rowdata.value = row;
		console.log('row', row)
		getpolicestation(2);
		if (type) {
			let obj;
			if (row.firstFlag == 1) {
				obj = {
					taskId: row.taskId,
					taskDisposalId: row.taskDisposalId,
					firstFlag: row.firstFlag,
				};
			} else {
				obj = {
					taskId: row.taskId,
					taskDisposalId: row.taskDisposalId,
					firstFlag: '',
				};
			}
			getselectDangerDetailByTaskId(obj).then((res) => {
				detaildata.value = res.data;
				questionAnswerList.value = res.data.questionAnswerList;
				if (res.data.checkContent) {
					evidencetext.value = res.data.checkContent;
				} else {
					evidencetext.value = "暂无检查纪实";
				}
				if (!res.data.fileList) {
					res.data.fileList = [];
				}
				picList.value = res.data.fileList;
			});
		} else {
			gettaskdetail(row.taskId).then((res) => {
				detaildata.value = res.data;
				questionAnswerList.value = res.data.questionAnswerList;
				console.log("questionAnswerList.value", questionAnswerList.value);
				if (res.data.checkContent) {
					evidencetext.value = res.data.checkContent;
				} else {
					evidencetext.value = "暂无检查纪实";
				}
				if (!res.data.fileList) {
					res.data.fileList = [];
				}
				picList.value = res.data.fileList;
			});
		}
	};

	/**
	 * @description:  获取检查单位
	 * @param {Number} id
	 */
	const getpolicestation = (deptType) => {
		let obj = {
			deptType: deptType,
			provinceId: userStore.userinfo.provinceId,
			cityId: userStore.userinfo.cityId,
			zoneId: userStore.userinfo.zoneId,
			streetId: userStore.userinfo.streetId,
		};
		selectDeptListByUser(obj).then((res) => {
			console.log("res.data", res.data);
			res.data = res.data.map((item, index) => {
				item.text = item.deptName;
				item.value = item.deptId;
				return item;
			});
			chargeList.value = res.data;
		});
	};

	/**
	 * @description: 编辑更新详情
	 */
	let contrastpopup = ref(null)
	let changeList = ref([])
	const handlereditchange = (item) => {
		getInfoByFollow(item.followId).then((res) => {
			if (res.code == 200) {
				contrastpopup.value.open("bottom");
				changeList.value = res.data;
			}
		});
	};

	//关闭弹窗
	const contrastclose = () => {
		contrastpopup.value.close();
	};

	/*
	 * 转派--主管单位条件限制
	 * */
	const uToastRef = ref(null);
	const deptIdsHandle = (val) => {
		if (!val) {
			return;
		}
		let obj = chargeList.value.find((item) => item.deptId === val);
		if (obj.industryManagementId !== rowdata.value.industryId) {
			nextTick(() => {
				operateform.value.deptIds = "";
				uToastRef.value.show({
					type: "error",
					message: "行业不匹配，请重新选择",
				});
				console.log("operateform.value.deptIds", operateform.value.deptIds);
			});
		}
	};

	/**
	 * @description: 处理不达标弹窗
	 */
	let activepopup = ref(null);
	const handlerquestion = (row, index, event) => {
		getquestion(row.questionId).then((res) => {
			if (res.code == 200) {
				activepopup.value = index;
				questionDetailList.value = res.data.questionDetailList;
				qusitiontext.value = row.description;
				lackItemList.value = row.lackItemList;
				showPopup.value = true;
				popupX.value = 50;
				popupY.value = 20;
			}
		});
	};
	/**
	 * @description: 关闭弹窗
	 */
	const closepopup = () => {
		showPopup.value = false;
	};

	//跳转检查上报
	const tocheck = (id) => {
		uni.navigateTo({
			url: "/pages/checkReport/checkReport?institutionId=" + id,
		});
	};

	/**
	 * @description:  处置任务操作
	 */
	let operateform = ref({
		// 操作业务类型 ：0-转派；1-办理 2-退回 3-上报 4-复核
		operationType: "",
		nodeTaskDisposalId: "",
		deptIds: "",
	});
	let dialogtitle = ref("");
	let popup = ref(null);
	const handlerTaskDisposal = (type) => {
		switch (type) {
			case 0:
				dialogtitle.value = "转派";
				break;
			case 1:
				dialogtitle.value = "办理";
				break;
			case 2:
				dialogtitle.value = "退回";
				break;
			case 3:
				dialogtitle.value = "上报";
				break;
			case 4:
				dialogtitle.value = "复核";
				break;

			default:
				break;
		}
		operateform.value.operationType = type;
		popup.value.open("bottom");
	};

	//关闭弹窗
	const maskclose = () => {
		resetdialogdata();
		popup.value.close();
	};
	//确定
	let uFormRef = ref(null);
	const determine = () => {
		uFormRef.value
			.validate()
			.then((valid) => {
				if (valid) {
					// uni.$u.toast('校验通过')
					console.log("rowdata.value", rowdata.value);
					let obj = JSON.parse(JSON.stringify(operateform.value));
					obj.nodeTaskDisposalId = rowdata.value.nodeTaskDisposalId;
					if (operateform.value.operationType == 0) {
						obj.deptIds = [operateform.value.deptIds];
					} else {
						obj.deptIds = [];
					}
					obj.taskId = rowdata.value.taskId;
					obj.taskDisposalId = rowdata.value.taskDisposalId;
					obj.institutionName = rowdata.value.name;
					if (
						operateform.value.operationType == 1 ||
						operateform.value.operationType == 4
					) {
						obj.fileList = fileVos.value;
					}
					console.log("obj", obj);
					updateTaskDisposal(obj).then((res) => {
						if (res.code == 200) {
							uToastRef.value.show({
								type: "success",
								message: res.msg,
							});
							showoperdialog.value = false;
							showdialog.value = false;
							operateform.value = {
								operationType: "",
								nodeTaskDisposalId: "",
								deptIds: "",
							};
							uni.navigateTo({
								url: `/pages/danger/danger`,
							});
							resetdialogdata();
						} else {
							uToastRef.value.show({
								type: "error",
								message: res.msg,
							});
						}
					});
				} else {}
			})
			.catch(() => {
				// 处理验证错误
			});
	};

	/**
	 * @description:  重置数据
	 */
	const resetdialogdata = () => {
		operateform.value = {
			// 操作业务类型 ：0-转派；1-办理 2-退回 3-上报 4-复核
			operationType: "",
			nodeTaskDisposalId: "",
			deptIds: "",
		};
		fileList1.value = [];
		fileVos.value = [];
	};

	// 删除图片
	const fileVos = ref([]);
	const fileList1 = ref([]);
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
		fileVos.value.splice(event.index, 1);
		operateform.value.picList = fileVos.value.length;
	};
	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: "uploading",
				message: "上传中",
			});
		});
		// console.log("所有图片", lists);
		// console.log("所有图片1", fileList1.value);
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: "success",
				message: "",
				url: result,
			});
			fileListLen++;
		}
	};
	const uploadFilePromise = (url) => {
		uploadFiles(url).then((res) => {
			console.log("上传结果", res);
			if (res.code == 200) {
				fileVos.value.push({
					...res.data,
				});
				operateform.value.picList = fileVos.value.length;
				if (uFormRef.value) {
					uFormRef.value.validateField("picList");
				}
			}
		});
	};

	// 可以用来接收传过来的值
	onLoad(({
		params
	}) => {
		nextTick(() => {
			let paramsobj = JSON.parse(params);
			if (paramsobj.pageType == "check") {
				uni.setNavigationBarTitle({
					title: "检查记录详情", // 设置页面标题为"检记详情"
				});
				handleDetailInfo(paramsobj);
			} else if (paramsobj.pageType == "task") {
				uni.setNavigationBarTitle({
					title: "任务详情", // 设置页面标题为"检记详情"
				});
				handleDetailInfo(paramsobj);
			} else if (paramsobj.pageType == "message") {
				let obj = {
					taskId: paramsobj.businessId,
					taskDisposalId: paramsobj.taskDisposalId,
					buttonAuthorityList: paramsobj.buttonAuthorityList,
					followStatus: paramsobj.followStatus,
					name: paramsobj.name,
					nodeTaskDisposalId: paramsobj.nodeTaskDisposalId,
					industryId: paramsobj.industryId,
				}
				handleDetailInfo(obj, true);
			} else if (paramsobj.pageType == "danger") {
				handleDetailInfo(paramsobj);
			}
		});
	});
</script>

<style lang="scss" scoped>
	.checkdetail {
		padding: 20rpx 30rpx;
		background-color: #fafafa;

		.checkdetail-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 30rpx;

			.head-left {
				.title {
					font-size: 28rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}

				.tabs {
					display: flex;
					font-size: 24rpx;
					margin-bottom: 10rpx;

					.tab {
						padding: 1rpx 10rpx;
						color: #ffffff;
						margin-right: 10rpx;
						border-radius: 4px;
					}

					.tab:nth-child(1) {
						color: #1b7ed6;
						background-color: #bcd4e7;
					}

					.tab:nth-child(2) {
						color: #b641d4;
						background-color: #dbc0e7;
					}
				}

				.address {
					display: flex;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}

		.checkdetail-item {
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			box-shadow: 0px 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 20rpx;

			.item-title {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 14rpx;

				image {
					margin-right: 20rpx;
				}
			}

			.work-content {
				.content-item {
					display: flex;
					font-size: 28rpx;
					color: #3f3f3f;
					border-bottom: 2rpx dotted #d6e5fe;
					margin-top: 10rpx;

					.title {
						width: 180rpx;
						flex-shrink: 0;
					}

					.text {
						flex: auto;
						text-align: right;
					}
				}
			}

			.checkdtl {
				.checkdtl-content {
					.content-item {
						display: flex;
						font-size: 28rpx;
						color: #3f3f3f;
						border-bottom: 2rpx dotted #d6e5fe;
						margin-top: 10rpx;

						.title {
							width: 180rpx;
							flex-shrink: 0;
						}

						.text {
							flex: auto;
							text-align: right;
						}
					}
				}

				.checkdtl-title {
					padding: 10rpx 0;
				}

				.checkdtl-tabs {
					position: relative;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					padding: 24rpx 0;

					.tab {
						background: #ecf3ff;
						border-radius: 8rpx;
						padding: 4rpx 12rpx;
					}

					.tab:nth-child(2) {
						background: #e8fff7;
						border-radius: 8rpx;
					}

					.tab:nth-child(3) {
						background: #fff2e3;
						border-radius: 8rpx;
					}
				}

				.checkdtl-table {
					position: relative;

					.table-th {
						display: flex;
						font-size: 28rpx;
						color: #626262;
						background-color: #f2f2f2;
						height: 50rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: unset;

						.th-check {
							width: 30%;
							text-align: center;
							line-height: 50rpx;
							border-right: 2rpx solid #e0e0e0;
						}

						.th-content {
							width: 70%;
							text-align: center;
							line-height: 50rpx;
						}
					}

					.table-tb {
						font-size: 28rpx;
						color: #626262;
						border: 2rpx solid #e0e0e0;
						border-top: unset;
						border-radius: unset;

						.tb-content {
							display: flex;

							.tb-check {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 30%;
								text-align: center;
								line-height: 50rpx;
								border-right: 2rpx solid #e0e0e0;
							}

							.tb-contentext {
								position: relative;
								width: 70%;
								line-height: 50rpx;
							}
						}
					}

					.popup {
						position: absolute;
						background-color: white;
						border: 2rpx solid black;
						padding: 10rpx;
						z-index: 1000;
						width: 340rpx;
						font-size: 24rpx;

						.close {
							text-align: right;
							font-size: 36rpx;
							cursor: pointer;
						}

						.title {
							font-size: 28rpx;
							color: #000000;
							font-weight: 600;
						}

						.text {
							font-size: 24rpx;
						}

						.triangle {
							position: absolute;
							left: -9px;
							top: 0;
							margin: auto 0;
							width: 0;
							height: 0;
							border-left: 5px solid transparent;
							border-right: 5px solid transparent;
							border-bottom: 7.5px solid #404040;
							/* 边长为100px时，高度为边长的正弦值乘以2/3 */
							transform: rotate(-90deg);
						}

						.Subitem {
							:deep(uni-text) {
								font-size: 24rpx !important;
							}
						}
					}

					.hiddle {
						display: none;
					}
				}

				.checkdtl-textarea {
					border: 2rpx solid #eeeeee;
					min-height: 300rpx;
					font-size: 28rpx;
					padding: 10rpx 12rpx;
					white-space: normal;
					/* 允许文本换行 */
					word-wrap: break-word;
					/* 长单词或URL也会换行 */
				}

				.checkdtl-pics {
					display: flex;
					justify-content: space-between;

					.pic {
						position: relative;
						display: flex;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.management-step {
				display: flex;
				flex-direction: column;

				.step {
					display: flex;
					color: #3c3c3c;

					.step-line {
						width: 4rpx;
						background-color: #f4f4f4;
						transform: translate(10rpx, 18rpx);
					}

					.step-content {
						width: 100%;

						.step-item {
							display: flex;
							font-size: 24rpx;
							margin-bottom: 8rpx;

							.dot {
								transform: translateY(10rpx);
								background-color: #00e595;
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								margin-right: 20rpx;
								z-index: 5;
								flex-shrink: 0;
							}

							.content {
								flex: auto;
								display: flex;
								justify-content: space-between;

								.content-time {
									font-size: 24rpx;
									color: #c6c6c6;
									flex-shrink: 0;
								}
							}
						}

						.step-source {
							display: flex;
							font-size: 24rpx;
							margin-bottom: 8rpx;

							.dot {
								flex-shrink: 0;
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
						}

						.step-text {
							display: flex;
							font-size: 24rpx;
							margin-bottom: 12rpx;

							.dot {
								flex-shrink: 0;
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}

							.content-change {
								display: flex;
								justify-content: center;
								align-items: center;
								background: #eff0f7;
								padding: 6rpx;
								font-weight: 500;
								font-size: 14px;
								color: #999999;
							}
						}

						.step-pics {
							display: flex;

							.dot {
								flex-shrink: 0;
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}

							.pic {
								position: relative;
								display: flex;
								flex-wrap: wrap;

								image {
									width: 100%;
									height: 100%;
									margin-right: 10rpx;
									margin-bottom: 10rpx;
								}
							}
						}
					}
				}

				.step:last-child {
					.step-line {
						background-color: transparent;
					}
				}
			}
		}

		.stay-empty {
			height: 120rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		background-color: #f9f9f9;
		padding: 0 30rpx;
		height: 120rpx;
		width: 100%;
		z-index: 10;

		.check-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 50rpx;
			width: calc(100% - 60rpx);
			height: 80rpx;
			background: linear-gradient(-90deg, #00c2d3, #00a7ff);
			border-radius: 4px;
			color: #ffffff;
		}

		.danger-btn {
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;
			width: calc(100% - 60rpx);

			.btn-item {
				margin-right: 20rpx;
			}

			.btn-item:last-child {
				margin-right: 0rpx;
			}
		}
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		position: relative;
		border-radius: 20rpx;
		padding: 30rpx;
		padding-bottom: 140rpx;

		.popup-content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 700;
		}

		.popup-form {
			.checkpload {
				.checkpload-tooltip {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
				}

				.checkploadTitle {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 60rpx;
				}
			}
		}

		.contrastpopup-table {
			.checkdtl-table {
				position: relative;
				margin-top: 10rpx;

				.table-th {
					display: flex;
					font-size: 28rpx;
					color: #626262;
					background-color: #f2f2f2;
					height: 50rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: unset;

					.th-check {
						flex: 1;
						text-align: center;
						line-height: 50rpx;
						border-right: 2rpx solid #e0e0e0;
					}

					.th-check:last-child {
						border-right: unset;
					}

					.th-content {
						flex: 1;
						text-align: center;
						line-height: 50rpx;
						border-right: 2rpx solid #e0e0e0;
					}
				}

				.table-tb {

					font-size: 28rpx;
					color: #626262;
					border: 2rpx solid #e0e0e0;
					border-top: unset;
					border-radius: unset;

					.tb-content {
						display: flex;

						.tb-check {
							display: flex;
							flex: 1;
							align-items: center;
							justify-content: center;

							text-align: center;
							line-height: 50rpx;
							border-right: 2rpx solid #e0e0e0;
						}

						.tb-content {
							flex: 1;
							line-height: 50rpx;
							border-right: 2rpx solid #e0e0e0;
						}

						.tb-content:last-child {
							border-right: unset;
						}
					}
				}

				.popup {
					position: absolute;
					background-color: white;
					border: 2rpx solid black;
					padding: 10rpx;
					z-index: 1000;
					width: 340rpx;
					font-size: 24rpx;

					.close {
						text-align: right;
						font-size: 36rpx;
						cursor: pointer;
					}

					.title {
						font-size: 28rpx;
						color: #000000;
						font-weight: 600;
					}

					.text {
						font-size: 24rpx;
					}

					.triangle {
						position: absolute;
						left: -9px;
						top: 0;
						margin: auto 0;
						width: 0;
						height: 0;
						border-left: 5px solid transparent;
						border-right: 5px solid transparent;
						border-bottom: 7.5px solid #404040;
						/* 边长为100px时，高度为边长的正弦值乘以2/3 */
						transform: rotate(-90deg);
					}

					.Subitem {
						:deep(uni-text) {
							font-size: 24rpx !important;
						}
					}
				}

				.hiddle {
					display: none;
				}
			}
		}

		.popup-content-button {
			display: flex;
			position: fixed;
			bottom: 0;
			width: calc(100% - 60rpx);
			height: 80rpx;
			margin-bottom: 50rpx;
		}

		.popup-content-close {}

		.popup-content-area {
			flex-grow: 1;
			/* 子元素将扩展以填充父容器的剩余空间 */
			width: 100%;
			overflow-y: scroll;

			.area-content {
				.area-item {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 20rpx;
				}

				.active {
					color: #00a7ff;
				}
			}
		}
	}
</style>